<template>
	<div class="body">
		<div class="title">
			<van-icon name="arrow-left" color="#fff" size="25"></van-icon>
			<div>商品详情</div>
			<div></div>
		</div>
		<section class="sec1">
			<van-swipe @change="onChange" border="1px solid red">
				<van-swipe-item>
					<div class="lunbo">1</div>
				</van-swipe-item>
				<van-swipe-item>
					<div class="lunbo lunbo1">2</div>
				</van-swipe-item>
				<van-swipe-item>
					<div class="lunbo">3</div>
				</van-swipe-item>
				<van-swipe-item>
					<div class="lunbo lunbo1">4</div>
				</van-swipe-item>
				<template #indicator>
					<div class="custom-indicator">{{ current + 1 }}/4</div>
				</template>
			</van-swipe>
		</section>
		<section class="sec2">
			<div>
				<div class="sec2-1">
					<div class="left">￥599</div>
					<div class="right">月销 <span>999</span></div>
				</div>
				<div class="sec2-2">各方对很符合股份回购复活UI梵蒂冈回答复合弓都挺好够黑的</div>
				<div class="sec2-3">
					<div>
						<div class="left">
							<div class="left">选择</div>
							<div class="right">颜色 款式 数量</div>
						</div>
						<van-icon name="arrow"></van-icon>
					</div>
					<van-divider></van-divider>
					<div>
						<div class="left">
							<div class="left">选择</div>
							<div class="right">颜色 款式 数量</div>
						</div>
						<van-icon name="arrow"></van-icon>
					</div>
				</div>
				<div class="sec2-3">
					<div>
						<div class="left">
							<div class="left">选择</div>
							<div class="right">颜色 款式 数量</div>
						</div>
						<van-icon name="arrow"></van-icon>
					</div>
					<van-divider></van-divider>
					<div>
						<div class="left">
							<div class="left">选择</div>
							<div class="right">颜色 款式 数量</div>
						</div>
						<van-icon name="arrow"></van-icon>
					</div>
				</div>
				
				<div class="cheng"></div>
			</div>
		</section>
		<div class="tijiao">
			<van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit" />
		</div>
	</div>
</template>

<script>
	import {
		Swipe,
		SwipeItem,
		Icon,
		Divider,
		SubmitBar
	} from 'vant'
	export default {
		data() {
			return {
				current: 0,
			}
		},
		methods: {
			onChange(index) {
				this.current = index;
			},
			onSubmit(){
				this.$router.push('/order')
			}
		},
		components: {
			[Swipe.name]: Swipe,
			[SwipeItem.name]: SwipeItem,
			[Icon.name]: Icon,
			[Divider.name]: Divider,
			[SubmitBar.name]: SubmitBar,
		}
	}
</script>

<style lang="less" scoped>
	@themeColor: #1ba4f0;
	@backColor: #f5f5f5;

	@shenglue: {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.custom-indicator {
		width: 15vw;
		height: 7vw;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 3.5vw;
		position: absolute;
		right: 5px;
		bottom: 5px;
		padding: 2px 5px;
		font-size: 12px;
		color: #fff;
		background: rgba(0, 0, 0, 0.2);
	}

	.lunbo {
		width: 100vw;
		height: 100vw;
		border-top-left-radius: 5vw;
		border-top-right-radius: 5vw;
		background-color: red;
	}

	.lunbo1 {
		background-color: blue;
	}

	.body {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: @backColor;
		&>.title {
			width: 100vw;
			height: 25vw;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: @themeColor;
			box-sizing: border-box;

			&>div {
				color: #fff;
				font-size: 25px;
			}
		}

		.sec1 {
			width: 100vw;
			background-color: @backColor;
			border-top-left-radius: 5vw;
			border-top-right-radius: 5vw;
			position: relative;
			top: -5vw;
		}
		.sec2{
			width: 95vw;
			.sec2-1{
				width: 100%;
				display: flex;
				justify-content: space-between;
				.left{
					color: red;
					font-weight: 700;
				}
				.right{
					font-weight: 700;
				}
			}
			.sec2-2{
				font-size: 20px;
				text-align: left;
				font-weight: 700;
			}
			.sec2-3{
				width: 100%;
				border-radius: 5vw;
				background-color: #fff;
				box-sizing: border-box;
				padding: 5vw;
				margin-top: 5vw;
				div{
					display: flex;
					justify-content: space-between;
					.left{
						.left{
							color: rgba(16,16,16,.6);
						}
						.right{
							font-weight: 700;
							margin-left: 6vw;
						}
					}
				}
			}
		}
		.cheng{
			height: 30vw;
		}
		.tijiao{
			position: fixed;
			bottom: 0;
			z-index: 999999999;
		}
	}
</style>
